<template>
    <div>
        <el-dialog :title="isAdd ? '添加管理员' : '编辑管理员'" :model-value='isShow' :before-close="cancel">
            <el-form :model="userForm" ref="formRef" :rules="rules">
                <el-form-item label="所属角色" :label-width="formLabelWidth" prop="roleid">
                    <el-select placeholder="请选择" v-model="userForm.roleid">
                        <el-option v-for="item in store.getters['role/getRole']" :key="item.id" :label="item.label"
                            :value="item.id" />

                    </el-select>
                </el-form-item>
                <el-form-item label="用户名称" :label-width="formLabelWidth" prop="username">
                    <el-input autocomplete="off" v-model="userForm.username" />
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth">
                    <el-input autocomplete="off" v-model="userForm.password" />
                </el-form-item>

                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" :active-value="1"
                        :inactive-value="2" v-model="userForm.status" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancel">取消</el-button>
                    <el-button type="primary" @click="confirm">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, defineEmits, defineProps, defineExpose } from 'vue'
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { useStore } from 'vuex'
import { useradd, useredit, userinfo } from '../../request/api'
let store = useStore()
let formRef = ref<FormInstance>()
store.dispatch('user/getUserAction')
store.dispatch('role/changeRoleAction')
let props = defineProps({
    isShow: Boolean,
    isAdd: Boolean
})
let rules = reactive<FormRules>({
    roleid: [
        { required: true, message: "请选择所属角色", trigger: "blur" }
    ],
    username: [
        { required: true, message: "请输入用户名称", trigger: "blur" },
        { min: 2, max: 6, message: "长度在2-6", trigger: "blur" },
    ],
});
let userForm = ref({
    username: '',
    password: '',
    roleid: '',
    status: 1
})
let reset = () => {
    userForm.value = {
        username: '',
        password: '',
        roleid: '',
        status: 1
    }
    formRef.value?.resetFields()
}
let emit = defineEmits(['cancel'])
let cancel = () => {
    emit('cancel', false)
    reset()
}
let lookup = (uid: any) => {
    userinfo({ uid }).then((res: any) => {
        // console.log(res);
        if (res.data.code == 200) {
            userForm.value = res.data.list
            userForm.value.id = uid
            console.log(userForm);
        }else{
            ElMessage.error(res.data.msg)  
        }

    })
}
let confirm = () => {
    formRef.value?.validate((val) => {
        console.log(userForm, '===========');
        if (val) {
            if (props.isAdd) {
                useradd(userForm.value).then((res: any) => {
                    if (res.data.code == 200) {
                        ElMessage.success(res.data.msg)
                        cancel()
                        store.dispatch('user/getUserAction')
                        store.dispatch('user/getCountAction')
                    } else {
                        ElMessage.error(res.data.msg)
                    }
                })
            }else{
                useredit(userForm.value).then((res:any)=>{
                    if(res.data.code==200){
                        ElMessage.success(res.data.msg)
                        cancel()
                        store.dispatch('user/getUserAction')
                        store.dispatch('user/getCountAction')
                    }else {
                        ElMessage.error(res.data.msg)
                    }
                })
            }
        }
    })


}
defineExpose({
    lookup
})
const formLabelWidth = '140px'
</script>

<style scoped lang="less"></style>